<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用$emit(eventName)触发事件</title>
	<script src="vue.js"></script>
</head>
<body>
<div id="app">
   <parent></parent>
</div>
<script>
var childNode = {
    template: `<button @click="incrementCounter">{{ counter }}</button>`,
    data(){
      return {
        counter: 0
      }
    },
    methods:{
      incrementCounter(){
        this.counter++;
        this.$emit('increment');
      }
    },
  }
var parentNode = {
    template: `
    <div>
        <child @increment="incrementTotal"></child>
        <child @increment="incrementTotal"></child>
        <p>{{ total }}</p>
    </div>
    `,
    components: {
      child: childNode
    },
    data(){
      return {
        total:0
      }
    },
    methods:{
      incrementTotal(){
        this.total++;
      }
    }
  };
  // 创建根实例
  var vm=new Vue({
    el: '#app',
    components: {
      'parent': parentNode
    }
  })
</script>
</body>
</html>
